<div>
    <kb-dialog ref="dialog">
        <kb-dialog-header :close-handle="closeHandle"
                          :title="Kooboo.text.component.fieldEditor.title"></kb-dialog-header>
        <kb-dialog-content>
            <div>
                <kb-tabs ref="kbTabs" :active.sync="tabIndex" :show-header="d_data.isSystemField?!d_data.isSystemField :!options.isSystemField">
                    <kb-container>
                        <template #header>{{Kooboo.text.component.fieldEditor.basic}}</template>
                        <template #content>
                            <kb-form :model="d_data">
                                <kb-form-item style="position: relative"
                                >
                                    <label class="col-md-3 control-label">{{Kooboo.text.common.name}}</label>
                                    <div class="col-md-9">
                                        <div class="input-group"
                                             v-kb-hint:right="{msg:firstTabValidate.name.msg,show:true}">
                                            <input v-if="isNewField"
                                                   v-model="d_data.name"
                                                   type="text" class="form-control key">
                                            <p v-else class="form-control-static key"
                                               style="word-break: break-word;">{{d_data.name}}</p>
                                            <template v-if="options.modifiedField">
                                            <span class="input-group-addon" v-show="d_data.isSystemField?!d_data.isSystemField :!options.isSystemField">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox"
                                                           v-model="d_data[options.modifiedField]"
                                                           @change="changeModified">
                                                    {{options.modifiedFieldText || ''}}
                                                </label>
                                            </div>
                                        </span>
                                                </span>
                                            </template>
                                        </div>
                                    </div>
                                </kb-form-item>
                                <kb-form-item
                                >
                                    <label class="col-md-3 control-label">{{ Kooboo.text.common.displayName}}</label>
                                    <div class="col-md-9">
                                        <input v-model="d_data.displayName"
                                               type="text" class="form-control key">
                                    </div>
                                </kb-form-item>
                                <template v-if="d_data.isSystemField?d_data.isSystemField :options.isSystemField">
                                    <kb-form-item
                                    >
                                        <div class="col-md-9 col-md-offset-3">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" v-model="d_data.editable"><span>{{Kooboo.text.component.fieldEditor.userEditable}}</span>
                                                </label>
                                            </div>
                                        </div>
                                    </kb-form-item>
                                </template>

                                <template v-if="d_data.isSystemField?!d_data.isSystemField :!options.isSystemField">
                                    <kb-form-item
                                    >
                                        <label class="col-md-3 control-label">{{Kooboo.text.component.fieldEditor.controlType}}</label>
                                        <div class="col-md-9">
                                            <select v-if="controlTypesOptions.length > 1" class="form-control"
                                                    v-model="d_data.controlType">
                                                <option v-for="(item , index) in controlTypesOptions" :value="item.value">
                                                    {{item.displayName}}
                                                </option>
                                            </select>
                                            <p v-else class="form-control-static">{{Kooboo.text.component.controlType[_.camelCase(d_data.controlType)]}}</p>
                                        </div>
                                    </kb-form-item>
                                </template>
                                <kb-form-item
                                        v-if="['selection','checkbox','radiobox','fixedspec'].includes(d_data.controlType.toLowerCase())">
                                    <label class="col-md-3 control-label">{{ Kooboo.text.component.fieldEditor.Options }}</label>
                                    <div class="col-md-9">
                                        <div class="input-groups" id="selection-options" v-show="d_data.selectionOptions && d_data.selectionOptions.length">

                                            <div v-for="(item,index) in d_data.selectionOptions" class="input-group">
                                                <div>
                                                    <input v-model="item.key"
                                                           type="text" class="form-control key input-small"
                                                           :placeholder="Kooboo.text.common.displayName"
                                                           v-kb-hint:left="firstTabValidate.selectionOptions[index].key.msg"/>
                                                </div>

                                                <span class="input-group-addon">:</span>
                                                <div>
                                                    <input v-model="item.value"
                                                           type="text" class="form-control value input-small"
                                                           :placeholder="Kooboo.text.common.value"
                                                    />

                                                    <span class="input-group-btn"
                                                          v-kb-hint:right="firstTabValidate.selectionOptions[index].value.msg"><a
                                                            @click.stop="removeOption($event, index)" class="btn btn-default"
                                                    ><i
                                                            class="fa fa-minus"
                                                            data-container="#selection-options"
                                                    ></i></a></span>
                                                </div>

                                            </div>
                                        </div>
                                        <div>
                                            <div>
                                                <a      v-kb-hint:right="firstTabValidate.selectionOptionsNull.msg"
                                                        @click.stop="addOption" :disabled="addDisable" class="btn dark"><i
                                                        class="fa fa-plus"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </kb-form-item>
                                <kb-form-item v-if="['mediafile', 'file'].includes(d_data.controlType.toLowerCase())">
                                    <div class="col-md-9 col-md-offset-3">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" v-model="d_data.multipleValue"
                                                       :disabled="!isNewField">
                                                <span>{{Kooboo.text.component.fieldEditor.enableMultiple}}</span>
                                            </label>
                                        </div>
                                    </div>
                                </kb-form-item>
                            </kb-form>
                            <kb-container v-if="options.showPreviewPanel" tag='div'
                                          :v-nodes="$refs.dialog.$slots.preview"
                                          class="panel panel-default margin-top-20"></kb-container>
                        </template>
                    </kb-container>
                    <kb-container>
                        <template #header>
                                {{Kooboo.text.component.fieldEditor.advanced}}
                        </template>
                        <template #content>
                            <kb-form :model="d_data">
                                <kb-form-item
                                >
                                    <label class="control-label col-md-3">{{Kooboo.text.component.fieldEditor.tooltip}}</label>
                                    <div class="col-md-9">
                                        <input type="text" v-model="d_data.tooltip" class="form-control">
                                    </div>
                                </kb-form-item>
                                <kb-form-item
                                 v-if="multilinguable"
                                >
                                    <div  class="col-md-9 col-md-offset-3">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"
                                                       v-model="d_data.multilingual">
                                                <span>{{Kooboo.text.component.fieldEditor.enableMultilingual}}</span>
                                            </label>
                                        </div>
                                    </div>
                                </kb-form-item>

                            </kb-form>
                            <kb-container v-if="options.showPreviewPanel && $refs.dialog.$slots.preview" tag='div'
                                          :v-nodes="$refs.dialog.$slots.preview"
                                          class="panel panel-default margin-top-20"></kb-container>
                        </template>
                    </kb-container>
                    <kb-container>
                        <template #header>
                                <template v-if="!['boolean','switch','selection','fixedspec','dynamicspec'].includes(d_data.controlType.toLowerCase())">
                                    {{Kooboo.text.component.fieldEditor.validation}}
                                </template>
                        </template>
                        <template #content>
                                <kb-field-validation  ref="fieldValidation" :data="d_data"
                                                     :show-validate-error="tabIndex === 2"></kb-field-validation>
                        </template>
                    </kb-container>

                </kb-tabs>
            </div>
        </kb-dialog-content>
        <kb-dialog-footer>
        <button class="btn green" @click="onSave">Save</button>
        <button class="btn gray" @click="onCancel">Cancel</button>
    </kb-dialog-footer>
        <template #preview>
            <div class="panel-heading">
                <h6 class="panel-title">{{Kooboo.text.common.preview}}</h6>
            </div>
            <div class="panel-body form-horizontal">
                <div class="form-group">
                    <label class="control-label col-md-3">{{d_data.displayName || d_data.name}}</label>
                    <div class="col-md-9">
                        <img :src="findControlType(d_data.controlType).preview" style="max-width: 100%;">
                        <span class="help-block">{{d_data.tooltip}}</span>
                    </div>
                </div>
            </div>
        </template>

    </kb-dialog>
</div>

